<template>
  <div class="left">
    <div class="left-logo">
      <img src="@/assets/img/logo2x.png" alt="">
      <img src="@/assets/img/fontAi@2x.png" alt="">
    </div>

    <ul class="left-menu">
      <li v-for="item in leftMenuList" :key="item.id" :class="item.id == checkMenuId ? 'active' : ''"
        @click="menuCheck(item)">
        <img :src="item.img" alt="">
        {{ item.title }}
      </li>
    </ul>

    <div class="left-btn">
      <div class="agreement">
        <img src="@/assets/img/agreement.png" alt="" />
        <span>隐私政策</span>
      </div>
      <div class="user">
        <div class='user223' @click="showLogin">
            <img class="user-avatar" :src="userStore.userInfo.logo || userAvatar" alt="" />
            <div class="login">{{
              strLength(userStore.userInfo.nickName)
              || '登录' }} >
            </div>

        </div>
        <div class="loginList" v-if="userConfig">
          <div class="settings" @click="settings">
            <img src="@/assets/img/menu/settings.png" alt="">
            <p>账号设置</p>
          </div>
          <div class="exit" @click="logout">
            <img src="@/assets/img/menu/exit.png" alt="">
            <p>退出登录</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- <Transition> -->
  <!-- <LoginModel :modalShow="isShow" @update="close"></LoginModel> -->
  <!-- </Transition> -->
</template>
<script lang='ts' setup>

import mockInterview from "@/assets/img/mockInterview.png";
import aiChat from "@/assets/img/aiChat.png";
import codeRs from "@/assets/img/codeRs.png";
import LoginModel from "@/components/LoginModel/index.vue";
import userAvatar from "@/assets/img/userAvatar.png"
import { userInfoStore } from "@/stores/userInfo";
const userStore = userInfoStore()


// 唤醒登录框model
import { getCurrentInstance, ComponentInternalInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance

import { watch, ref, nextTick } from 'vue'
import { useRouter ,useRoute } from "vue-router";
import { strLength } from "@/utils/strLength";

const router = useRouter()
const route = useRoute();



 const leftMenuList = [
  {
    id: 1,
    img: aiChat,
    title: "智能对话",
     Name: 'Chat',
  }, {
    id: 2,
    img: mockInterview,
    title: "模拟面试",
     Name: 'ChatInterView',
  }, {
    id: 3,
    img: codeRs,
    title: "程序员",
     Name: 'Programmers',}
]

// 点击一级菜单 切换更换路由的参数
// 这里跳转监听不到 数据  待解决 先多写了个路由页面的 meta参数
const checkMenuId = ref(1);
const menuCheck = (item:any) => {
  checkMenuId.value = item.id;  
  console.log(item);
  if (item.id === 3){
    router.push({
      name: item.Name
    })
  }else{
    router.push({
      name: item.Name,
      params: {
        chattype: item.id
      }
    })
  }
}

onMounted(()=>{
  checkMenuId.value = 1
})


// watch(()=>route.meta.typeId,(newVal,oldVal)=>{
//   console.log('切换路由的参数',route,oldVal);
// })



// 登录框显示
// const isShow = ref(false)


//点击头像是否出现设置和退出登录 
const userConfig = ref(false)
const showLogin = () => {
if(userStore.isLogin){
  //如果登录 点头像 出用户信息和退出登录
  userConfig.value = !userConfig.value
}else{

  // isShow.value = true
  proxy?.$showLoginDialog() 
  // 这里就执行一次跳转 让路由拦截起作用
  console.log('执行跳转')
  router.push({name:'Home'})
}
  
}
// 登录框关闭  弃用  注册了全局组件
// const close = () => {
//   console.log('123')
//   isShow.value = false
// }



//退出登录
const logout = ()=>{
  userConfig.value = false
  proxy?.$showLoginDialog() 
  userStore.outLogin()
}
// 点击设置账号 跳转路由
const settings = ()=>{
  userConfig.value = false
  router.push({ path:'/userConfig'})
  nextTick()
}

</script>
<style scoped lang='scss'>

    .left {
      display: flex;
      position: relative;
      transform: translateZ(0);
      flex-direction: column;
      width: 176px;
      height: 100%;
      background-color: #FFFFFF;
      // background-color: burlywood;
      padding: 27px 8px 30px 9px;
      box-sizing: border-box;
      z-index: 999;
      .left-logo>:nth-child(1) {
        margin: 0 auto 10px;
        width: 56px;
        height: 56px;
      }
  
      .left-logo>:nth-child(2) {
        margin: 0 auto 43px;
        width: 82px;
        height: 34px;
      }
    }
  
    .left-menu {
      flex: 1;
    }
  
    .left-menu li {
      padding-left: 20px;
      border-radius: 14px;
      box-sizing: border-box;
      font-size: 18px;
        width: 159px;
          height: 55px;
          margin-bottom: 5px;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all 0.5s;
      & img {
        margin-right: 5px;
      }
  

  
      &:hover {
        background-color: #f2f2f2;
      }
  
    }
  
    .active {
      background-color: #f2f2f2;
    }
  
    .left-btn {
        position: relative;
      &>.agreement {
        color: #d80f0f;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        margin: 20px 0;
        cursor: pointer;
  
        img {
          width: 10px;
          height: 11px;
          margin-right: 8px;
        }
      }
  
      .user {

        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: #c90000;
        width: 126px;
        height: 44px;
        border-radius: 28px 28px 28px 28px;
        color: #FFFFFF;
        cursor: pointer;
        .user223{
          display: flex;
          position: relative;
          z-index: 999;
          width: 100%;
          height: 100%;
          justify-content: center;
          align-items: center;
                  img {
                      width: 24px;
                      height: 24px;
                      margin-right: 10px;
                      border-radius: 50%;
                    }
                  
                    .user-name {
                      display: flex;
                    }
        }

      }
    
    }


  .loginList{
     width: 127px;
        height: 77px;
        position: absolute;
        right: -130px;
        bottom: 0px;
        border-radius:10px;
        box-sizing: border-box;
        background: #c90000;
        box-shadow: 0px .2vw .6vw .1vw rgba(255, 28, 28, 0.1608);
        img {
          width: 18px;
          height: 18px;
        }
  
        p {
          flex: 1;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          text-align: center;
        }
  
        .settings {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-bottom: .1vw solid #FFFFFF;
          box-sizing: border-box;
          padding:  0 18px;
  
        }
  
        .exit {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;
            box-sizing: border-box;
          padding: 0 18px;
        }
    }




</style>
